<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

	<link href="wwwroot/layuiadmin/layui/css/layui.css" rel="stylesheet" />
</head>

<body>
	<div class="layui-fluid" style="padding:0;">
		<div class="layui-card">
			<div class="layui-card-body" id="image">
				<div id="center">
					<div id="div1">
						&nbsp;
					</div>
					<div id="div2">
						<span id="people"></span>
						<div id="bt">
							<a class='layui-btn layui-btn-lg layui-btn-radius layui-btn-warm'>20元</a>
							<a class='layui-btn layui-btn-lg layui-btn-radius layui-btn-warm'>50元</a>
							<a class='layui-btn layui-btn-lg layui-btn-radius layui-btn-warm'>80元</a>
							<a class='layui-btn layui-btn-lg layui-btn-radius layui-btn-warm'>100元</a>
						</div>
						<div id="name">
						</div>
					</div>
				</div>
				<div id="dibu">
					<a class='layui-btn layui-btn-warm'>开始抽奖</a>
				</div>
			</div>
		</div>
	</div>
</body>

</html>
<script src="wwwroot/layuiadmin/layui/layui.js"></script>

<script>
	layui.config({
		base: 'wwwroot/layuiadmin/' //静态资源所在路径
	}).extend({
		index: '/lib/index' //主入口模块
	}).use(function () {
		var $ = layui.$;

		const strHtml = "<div class='container'><div class='scroll-list'><div>Sam</div><div>Frank</div><div>Kevin</div><div>邱旭赞</div><div>许星星</div><div>孙敏</div><div>吴亮</div><div>陈佳斐</div><div>丁松华</div><div>朱倩</div><div>高春英</div><div>彭汪婷</div><div>朱睛睛</div><div>古白玲</div><div>李内蒙</div><div>闫静静</div><div>唐言</div><div>高倩</div><div>戴哲阳</div><div>王双</div><div>胡燕南</div><div>何凤</div><div>宋姣姣</div><div>金梦何</div><div>邹明君</div><div>杨盼</div><div>张玉梅</div><div>吴虹波</div><div>王玥</div><div>王丹</div><div>李慧慧</div><div>韩雅君</div><div>沈佳平</div><div>贺提玉</div><div>郑丽莉</div><div>韩云晓</div><div>杨若涵</div><div>高轶娟</div><div>张姝洁</div><div>童中明</div><div>闻静</div><div>步程</div><div>雷红庆</div><div>吴雯娟</div><div>王祥晶</div><div>倪磊</div><div>陈豪骅</div><div>周清淑</div><div>李冰杰</div><div>王誉霖</div><div>曹晶</div><div>杨思琪</div><div>李化琳</div><div>沈黎锋</div><div>上官智强</div><div>陈瑞强</div><div>杨蓉</div><div>朱帅龙</div><div>刘锦</div><div>郑溶溶</div><div>周艳群</div><div>徐志权</div><div>夏丽</div><div>金倩</div><div>王欣瑶</div><div>李文月</div><div>林丹丹</div><div>董连倩</div><div>阙梦怡</div><div>杜小帮</div><div>张彭</div><div>于智文</div><div>李佳</div><div>王洪峰</div><div>赵嫦玥</div><div>叶丽霞</div><div>陈琴</div><div>朱亚鹏</div><div>王草</div><div>江楠</div><div>曾芸芸</div><div>李莹莹</div><div>杨柳</div><div>何尹</div><div>高睿</div><div>沈杨泽</div><div>吴文杰</div><div>柳冰倩</div><div>李恩琦</div><div>甘文静</div><div>曹梦迪</div><div>蔡玉清</div><div>潘淑薇</div><div>刘羽茜</div><div>李文超</div><div>原煜祥</div><div>彭西琴</div><div>丁莹</div><div>阳文杰</div><div>范鑫烨</div><div>谢文凯</div><div>Sam</div><div>Frank</div><div>Kevin</div><div>邱旭赞</div><div>许星星</div><div>孙敏</div><div>吴亮</div><div>陈佳斐</div><div>丁松华</div><div>朱倩</div><div>高春英</div><div>彭汪婷</div><div>朱睛睛</div><div>古白玲</div></div></div>";

		const init = () => {
			$('#image').height($(window).height());
			$("#center").css("margin-top", $(window).height() / 3 - 50);
			$(window).resize(function (e) {
				$('#image').height($(window).height());
				$("#center").css("margin-top", $(window).height() / 3 - 50);
			});
		}
		init();

		let nameList = [{ "id": 1, "name": "庄宇" }, { "id": 2, "name": "刘建栋" }, { "id": 3, "name": "邱旭赞" }, { "id": 4, "name": "许星星" }, { "id": 5, "name": "孙敏" }, { "id": 6, "name": "吴亮" }, { "id": 7, "name": "陈佳斐" }, { "id": 8, "name": "丁松华" }, { "id": 9, "name": "高春英" }, { "id": 10, "name": "彭汪婷" }, { "id": 11, "name": "徐佳" }, { "id": 12, "name": "朱睛睛" }, { "id": 13, "name": "古白玲" }, { "id": 14, "name": "刘敏" }, { "id": 15, "name": "李内蒙" }, { "id": 16, "name": "闫静静" }, { "id": 17, "name": "唐言" }, { "id": 18, "name": "高倩" }, { "id": 19, "name": "戴哲阳" }, { "id": 20, "name": "王双" }, { "id": 21, "name": "胡燕南" }, { "id": 22, "name": "何凤" }, { "id": 23, "name": "宋姣姣" }, { "id": 24, "name": "金梦何" }, { "id": 25, "name": "邹明君" }, { "id": 26, "name": "杨盼" }, { "id": 27, "name": "张玉梅" }, { "id": 28, "name": "吴虹波" }, { "id": 29, "name": "王玥" }, { "id": 30, "name": "王丹" }, { "id": 31, "name": "李慧慧" }, { "id": 32, "name": "韩雅君" }, { "id": 33, "name": "沈佳平" }, { "id": 34, "name": "贺提玉" }, { "id": 35, "name": "郑丽莉" }, { "id": 36, "name": "杨若涵" }, { "id": 37, "name": "高轶娟" }, { "id": 38, "name": "张姝洁" }, { "id": 39, "name": "童中明" }, { "id": 40, "name": "雷红庆" }, { "id": 41, "name": "王祥晶" }, { "id": 42, "name": "倪磊" }, { "id": 43, "name": "陈豪骅" }, { "id": 44, "name": "王誉霖" }, { "id": 45, "name": "李化琳" }, { "id": 46, "name": "沈黎锋" }, { "id": 47, "name": "上官智强" }, { "id": 48, "name": "陈瑞强" }, { "id": 49, "name": "朱帅龙" }, { "id": 50, "name": "刘锦" }, { "id": 51, "name": "郑溶溶" }, { "id": 52, "name": "徐志权" }, { "id": 53, "name": "夏丽" }, { "id": 54, "name": "王欣瑶" }, { "id": 55, "name": "李文月" }, { "id": 56, "name": "林丹丹" }, { "id": 57, "name": "杜小帮" }, { "id": 58, "name": "张彭" }, { "id": 59, "name": "李佳" }, { "id": 60, "name": "王洪峰" }, { "id": 61, "name": "赵嫦玥" }, { "id": 62, "name": "魏铭泽" }, { "id": 63, "name": "叶丽霞" }, { "id": 64, "name": "江楠" }, { "id": 65, "name": "李莹莹" }, { "id": 66, "name": "杨柳" }, { "id": 67, "name": "何尹" }, { "id": 68, "name": "高睿" }, { "id": 69, "name": "沈杨泽" }, { "id": 70, "name": "柳冰倩" }, { "id": 71, "name": "李恩琦" }, { "id": 72, "name": "曹梦迪" }, { "id": 73, "name": "蔡玉清" }, { "id": 74, "name": "潘淑薇" }, { "id": 75, "name": "刘羽茜" }, { "id": 76, "name": "李文超" }, { "id": 77, "name": "原煜祥" }, { "id": 78, "name": "彭西琴" }, { "id": 79, "name": "阳文杰" }, { "id": 80, "name": "范鑫烨" }, { "id": 81, "name": "陈逸文" }, { "id": 82, "name": "王志昂" }, { "id": 83, "name": "王雪静" }, { "id": 84, "name": "高艳鸽" }, { "id": 85, "name": "华蒙蒙" }, { "id": 86, "name": "苏高" }, { "id": 87, "name": "梁雅" }, { "id": 88, "name": "尹晓艳" }, { "id": 89, "name": "陈梦欢" }, { "id": 90, "name": "李桑" }, { "id": 91, "name": "韦振宏" }, { "id": 92, "name": "林燕颖" }, { "id": 93, "name": "王传情" }, { "id": 94, "name": "涂淑敏" }, { "id": 95, "name": "杨蓉" }, { "id": 96, "name": "杨尚华" }, { "id": 97, "name": "郑梦婷" }, { "id": 98, "name": "冷如意" }, { "id": 99, "name": "韩云晓" }]

		const randomInteger = (min, max) => {
			let rand = (min - 1) + Math.random() * ((max - 1) + 1 - (min - 1));
			return Math.floor(rand);
		}

		let arr20 = [], arr20_true = false, is_true1 = false;
		let arr50 = [], arr50_true = false, is_true2 = false;
		let arr80 = [], arr80_true = false, is_true3 = false;
		let arr100 = [], arr100_true = false, is_true4 = true;

		$("#bt a").click(function (e) {
			$("#bt a").css("background-color", "#f13c04").css("color", "#fff");
			$(this).css("background-color", "#ffe3c9").css("color", "#f13c04");

			let text = $(this).text();
			if (text === "20元") {
				arr20_true = true;
				arr50_true = false;
				arr80_true = false;
				arr100_true = false;
			}
			else if (text === "50元") {
				arr20_true = false;
				arr50_true = true;
				arr80_true = false;
				arr100_true = false;
			}
			else if (text === "80元") {
				arr20_true = false;
				arr50_true = false;
				arr80_true = true;
				arr100_true = false;
			}
			else if (text === "100元") {
				arr20_true = false;
				arr50_true = false;
				arr80_true = false;
				arr100_true = true;
			}
		});

		let max = nameList.length;//总人数
		// console.log(max);
		const spare = 105 - max;//临时不参加的人数
		// console.log(spare);
		let id1 = 24, id2 = 103;
		$("#dibu a").click(function (e) {
			// console.log(nameList);
			if ((arr20.length + arr50.length + arr80.length + arr100.length) === (105 - spare)) {
				layer.msg('抽奖已结束', { icon: 0 });
				return false;
			}

			if (!arr20_true && !arr50_true && !arr80_true && !arr100_true) {
				layer.msg('请选择抽奖金额', { icon: 0 });
				return false;
			}

			let randoms = [];
			let names = [];
			if (arr20_true) {
				if (arr20.length === (is_true1 ? (25 - spare) : 25)) {
					layer.msg('20元抽奖结束', { icon: 0 });
					return false;
				}

				while (true) {
					let isExists = false;
					let random = randomInteger(1, max);
					for (let i = 0; i < randoms.length; i++) {
						if (random === randoms[i]) {
							isExists = true;
							break;
						}
					}

					if (!isExists) {
						randoms.push(random);
					}

					if (is_true1) {
						if (spare > 0) {
							if ((25 - spare) >= 20) {
								if (arr20.length === 20) {
									if (randoms.length === (5 - spare)) {
										max = max - (5 - spare);
										break;
									}
								} else {
									if (randoms.length === 10) {
										max = max - 10;
										break;
									}
								}
							} else if ((25 - spare) >= 10) {
								if (arr20.length === 10) {
									if (randoms.length === (15 - spare)) {
										max = max - (15 - spare);
										break;
									}
								} else {
									if (randoms.length === 10) {
										max = max - 10;
										break;
									}
								}
							} else {
								if (randoms.length === (25 - spare)) {
									max = max - (25 - spare);
									break;
								}
							}
						} else {
							if (arr20.length === 20) {
								if (randoms.length === 5) {
									max = max - 5;
									break;
								}
							} else {
								if (randoms.length === 10) {
									max = max - 10;
									break;
								}
							}
						}
					} else {
						if (arr20.length === 20) {
							if (randoms.length === 5) {
								max = max - 5;
								break;
							}
						} else {
							if (randoms.length === 10) {
								max = max - 10;
								break;
							}
						}
					}
				}
				// console.log(max);
				// console.log(randoms);

				for (let i = 0; i < randoms.length; i++) {
					if (nameList[randoms[i]].id === id1 || nameList[randoms[i]].id === id2) {
						while (true) {
							let isExists = false;
							let random = randomInteger(1, max);
							for (let i = 0; i < randoms.length; i++) {
								if (random === randoms[i]) {
									isExists = true;
									break;
								}
							}

							if (!isExists) {
								randoms[i] = random;
								break;
							}
						}
					}
				}

				for (let i = 0; i < randoms.length; i++) {
					names.push(nameList[randoms[i]]);
					arr20.push(nameList[randoms[i]]);
				}

				// console.log("20元已抽人数=" + JSON.stringify(arr20));
			}
			else if (arr50_true) {
				if (arr50.length === (is_true2 ? (25 - spare) : 25)) {
					layer.msg('50元抽奖结束', { icon: 0 });
					return false;
				}

				while (true) {
					let isExists = false;
					let random = randomInteger(1, max);
					for (let i = 0; i < randoms.length; i++) {
						if (random === randoms[i]) {
							isExists = true;
							break;
						}
					}

					if (!isExists) {
						randoms.push(random);
					}

					if (is_true1) {
						if (spare > 0) {
							if ((25 - spare) >= 20) {
								if (arr50.length === 20) {
									if (randoms.length === (5 - spare)) {
										max = max - (5 - spare);
										break;
									}
								} else {
									if (randoms.length === 10) {
										max = max - 10;
										break;
									}
								}
							} else if ((25 - spare) >= 10) {
								if (arr50.length === 10) {
									if (randoms.length === (15 - spare)) {
										max = max - (15 - spare);
										break;
									}
								} else {
									if (randoms.length === 10) {
										max = max - 10;
										break;
									}
								}
							} else {
								if (randoms.length === (25 - spare)) {
									max = max - (25 - spare);
									break;
								}
							}
						} else {
							if (arr50.length === 20) {
								if (randoms.length === 5) {
									max = max - 5;
									break;
								}
							} else {
								if (randoms.length === 10) {
									max = max - 10;
									break;
								}
							}
						}
					} else {
						if (arr50.length === 20) {
							if (randoms.length === 5) {
								max = max - 5;
								break;
							}
						} else {
							if (randoms.length === 10) {
								max = max - 10;
								break;
							}
						}
					}
				}
				// console.log(max);
				// console.log(randoms);

				for (let i = 0; i < randoms.length; i++) {
					if (nameList[randoms[i]].id === id1 || nameList[randoms[i]].id === id2) {
						while (true) {
							let isExists = false;
							let random = randomInteger(1, max);
							for (let i = 0; i < randoms.length; i++) {
								if (random === randoms[i]) {
									isExists = true;
									break;
								}
							}

							if (!isExists) {
								randoms[i] = random;
								break;
							}
						}
					}
				}

				for (let i = 0; i < randoms.length; i++) {
					names.push(nameList[randoms[i]]);
					arr50.push(nameList[randoms[i]]);
				}

				// console.log("50元已抽人数=" + JSON.stringify(arr50));
			}
			else if (arr80_true) {
				if (arr80.length === (is_true3 ? (25 - spare) : 25)) {
					layer.msg('80元抽奖结束', { icon: 0 });
					return false;
				}

				while (true) {
					let isExists = false;
					let random = randomInteger(1, max);
					for (let i = 0; i < randoms.length; i++) {
						if (random === randoms[i]) {
							isExists = true;
							break;
						}
					}

					if (!isExists) {
						randoms.push(random);
					}

					if (is_true3) {
						if (spare > 0) {
							if ((25 - spare) >= 20) {
								if (arr80.length === 20) {
									if (randoms.length === (5 - spare)) {
										max = max - (5 - spare);
										break;
									}
								} else {
									if (randoms.length === 10) {
										max = max - 10;
										break;
									}
								}
							} else if ((25 - spare) >= 10) {
								if (arr80.length === 10) {
									if (randoms.length === (15 - spare)) {
										max = max - (15 - spare);
										break;
									}
								} else {
									if (randoms.length === 10) {
										max = max - 10;
										break;
									}
								}
							} else {
								if (randoms.length === (25 - spare)) {
									max = max - (25 - spare);
									break;
								}
							}
						} else {
							if (arr80.length === 20) {
								if (randoms.length === 5) {
									max = max - 5;
									break;
								}
							} else {
								if (randoms.length === 10) {
									max = max - 10;
									break;
								}
							}
						}
					} else {
						if (arr80.length === 20) {
							if (randoms.length === 5) {
								max = max - 5;
								break;
							}
						} else {
							if (randoms.length === 10) {
								max = max - 10;
								break;
							}
						}
					}


				}
				// console.log(max);
				// console.log(randoms);

				for (let i = 0; i < randoms.length; i++) {
					if (nameList[randoms[i]].id === id1 || nameList[randoms[i]].id === id2) {
						while (true) {
							let isExists = false;
							let random = randomInteger(1, max);
							for (let i = 0; i < randoms.length; i++) {
								if (random === randoms[i]) {
									isExists = true;
									break;
								}
							}

							if (!isExists) {
								randoms[i] = random;
								break;
							}
						}
					}
				}

				for (let i = 0; i < randoms.length; i++) {
					names.push(nameList[randoms[i]]);
					arr80.push(nameList[randoms[i]]);
				}
				// console.log("80元已抽人数=" + JSON.stringify(arr80));
			}
			else {
				if (arr100.length === (is_true4 ? (30 - spare) : 30)) {
					layer.msg('100元抽奖结束', { icon: 0 });
					return false;
				}

				while (true) {
					let isExists = false;
					let random = randomInteger(1, max);
					for (let i = 0; i < randoms.length; i++) {
						if (random === randoms[i]) {
							isExists = true;
							break;
						}
					}

					if (!isExists) {
						randoms.push(random);
					}

					if (is_true4) {
						if (spare > 0) {
							if ((30 - spare) >= 20) {
								if (arr100.length === 20) {
									if (randoms.length === (10 - spare)) {
										max = max - (10 - spare);
										break;
									}
								} else {
									if (randoms.length === 10) {
										max = max - 10;
										break;
									}
								}
							} else if ((30 - spare) >= 10) {
								if (arr100.length === 10) {
									if (randoms.length === (20 - spare)) {
										max = max - (20 - spare);
										break;
									}
								} else {
									if (randoms.length === 10) {
										max = max - 10;
										break;
									}
								}
							} else {
								if (randoms.length === (30 - spare)) {
									max = max - (30 - spare);
									break;
								}
							}
						} else {
							if (randoms.length === 10) {
								max = max - 10;
								break;
							}
						}
					} else {
						if (randoms.length === 10) {
							max = max - 10;
							break;
						}
					}
				}
				// console.log("max=" + max);
				// console.log(randoms);

				for (let i = 0; i < randoms.length; i++) {
					names.push(nameList[randoms[i]]);
					arr100.push(nameList[randoms[i]]);
				}

				// console.log("100元已抽人数=" + JSON.stringify(arr100));
			}

			//#region html渲染
			let html = "";
			if (randoms.length === 5) {
				html += "<div class='layui-name'>"
				for (let i = 0; i < 5; i++) {
					html += "<div >"
					html += "<span>" + nameList[randoms[i]].name + "</span>"
					html += "</div>"
				}
				html += "</div>"
			}
			else if (randoms.length === 10) {
				html += "<div class='layui-name'>"
				for (let i = 0; i < 5; i++) {
					html += "<div>"
					html += "<span>" + nameList[randoms[i]].name + "</span>"
					html += "</div>"
				}
				html += "</div>"

				html += "<div class='layui-name'>"
				for (let i = 5; i < 10; i++) {
					html += "<div>"
					html += "<span>" + nameList[randoms[i]].name + "</span>"
					html += "</div>"
				}
				html += "</div>"
			}
			else {
				if (randoms.length <= 5) {
					html += "<div class='layui-name'>"
					for (let i = 0; i < randoms.length; i++) {
						html += "<div>"
						html += "<span>" + nameList[randoms[i]].name + "</span>"
						html += "</div>"
					}
					html += "</div>"
				}
				else {
					html += "<div class='layui-name'>"
					for (let i = 0; i < 5; i++) {
						html += "<div>"
						html += "<span>" + nameList[randoms[i]].name + "</span>"
						html += "</div>"
					}
					html += "</div>"

					html += "<div class='layui-name'>"
					for (let i = 5; i < randoms.length; i++) {
						html += "<div >"
						html += "<span>" + nameList[randoms[i]].name + "</span>"
						html += "</div>"
					}
					html += "</div>"
				}
			}

			// $("#name").html(html);
			// $("#people").addClass('layui-badge layui-bg-orange').text("已抽" + (arr20.length + arr50.length + arr80.length + arr100.length) + "人");
			// nameList = nameList.filter(i => !names.some(j => j === i));

			// let aaa = [...arr20, ...arr50, ...arr80, ...arr100];
			// console.log("aaa=" + JSON.stringify(aaa));

			layer.open({
				type: 1,
				title: "抽奖",
				content: strHtml,
				closeBtn: 0,
				area: ["500px", "500px"],
				btn: ["确定"],
				yes: function (e, i) {
					loading = layer.load(2, {
						shade: [0.2, '#000']
					});

					setTimeout(() => {
						layer.close(loading);
						$("#name").html(html);
						$("#people").addClass('layui-badge layui-bg-orange').text("已抽" + (arr20.length + arr50.length + arr80.length + arr100.length) + "人");
					}, 500);
					nameList = nameList.filter(i => !names.some(j => j === i));

					layer.close(e);
				}
			})
			$(".layui-layer-content").css("overflow", "hidden");
			//#endregion
		});
	})
</script>

<style>
	#dibu {
		bottom: 100px;
		position: absolute;
		left: 50%;
		transform: translatex(-50%);
	}

	#dibu a {
		height: 80px;
		line-height: 80px;
		padding: 0 100px;
		font-size: 35px;
		border-radius: 10px;
		background-color: #ffe1a3;
		color: #f13c04;
	}

	.container {
		/* 父容器需要有明确的高度 */
		height: 250px;
		text-align: center;
	}

	.container>.scroll-list {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		animation: scroll 1s linear infinite normal;
	}

	.container>.scroll-list>div {
		width: 100%;
		/* 滚动的项目需要有具体的高度 */
		height: 30px;
		/* background-color: #1ea7ff; */
		display: flex;
		justify-content: center;
		align-items: center;
		color: black;
		font-size: 16px;
		;
	}

	@keyframes scroll {
		100% {
			/* 需要滚动内容的总高度 */
			top: -3150px;
		}
	}

	#div1 {
		width: 12.5%;
		float: left;
		text-align: center;
	}

	#div2 {
		width: 74%;
		float: left;
		/* text-align: center; */
		/* border: blue solid 1px; */
	}

	#div3 {
		width: 12.5%;
		float: left;
		text-align: center;
		/* border: blue solid 1px; */
	}

	#image {
		height: 1400px;
		background-image: url('wwwroot/image/抽奖背景.png');
		background-size: 100% 100%;
	}

	#bt {
		/* float: right; */
		text-align: center;
	}

	#bt a {
		background-color: #f13c04;
		height: 50px;
		line-height: 50px;
		padding: 0 31px;
		font-size: 20px;
	}

	#name {
		text-align: center;
	}

	span {
		font-size: 55px;
		font-weight: bolder;
		color: #fece9e;
	}

	.layui-name {
		padding-top: 100px;
	}

	.layui-name div {
		float: left;
		width: 20%;
	}
</style>